<template>
  <div>
    <el-form :model="login" class="w-50 mx-auto mt-3">
      <el-form-item>
        <div class="w-50 mx-auto fs-1 text-center">学习笔记用户登录</div>
      </el-form-item>
      <el-form-item>
        <div class="w-50 mx-auto text-center">
          <img src="@/assets/logo.png" style="width: 7rem; height: 7rem" />
        </div>
      </el-form-item>
      <el-form-item>
        <div class="w-50 mx-auto fs-6 text-center">学习使我快乐</div>
      </el-form-item>
      <el-form-item class="mb-0">
        <el-input
          v-model="login.username"
          class="w-50 mx-auto"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item class="mb-0">
        <div class="w-50 mx-auto text-end">忘记用户名？</div>
      </el-form-item>
      <el-form-item class="mb-0">
        <el-input
          class="w-50 mx-auto"
          v-model="login.password"
          placeholder="密码"
          >></el-input
        >
      </el-form-item>
      <el-form-item class="mb-0">
        <div class="w-50 mx-auto text-end">忘记密码？</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="mx-auto" @click="loginAction"
          >登录</el-button
        >
      </el-form-item>
      <el-form-item>
        <div class="w-50 mx-auto">
          没有账户，
          <!--<router-link>组件的使用类似<a>标签跳转，通过传入to属性，即可跳转到指定页面-->
          <router-link to="/registry">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import auth from '@/auth/auth.js';

export default {
  name: "LoginFrame",
  data() {
    return {
      login: {
        uname: null,
        upsd: null,
      },
    };
  },
  mounted(){
    auth.logout();//登出清空数据！！
    
  },
  methods: {
    loginAction() {
      this.$axios.post("/api/login", this.login).then((response) => {
        let data = response.data;
        if (data.code == 200) {
          let token = data.data;
          auth.saveToken(token);
          this.$router.push("/space");
        } else {
          alert(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>